/*
  学习目标：使用React中的受控组件
  什么是受控组件？
    1. 表单元素。
    2. 🔔由state控制值。
    3. 🔔由setState来改变值。
*/

// rcc
import React, { Component } from 'react';

export default class App extends Component {
  state = {
    name: 'zs',
  };
  handleChange = (e) => {
    console.log(e.target.value, 'e.target.value');
    this.setState({
      name: e.target.value,
    });
  };

  //   注意：
  //      1. 👍**推荐**使用`onChange` 事件监听用户输入，👎**不推荐**使用`onInput`。
  //      2. `react` 中`change` 事件等同于html中的`input` 事件。
  //      3. `react`中的`blur` 事件，等同于html中的`change` 事件
  render() {
    return (
      <div>
        <input type="text" value={this.state.name} onChange={this.handleChange} />
      </div>
    );
  }
}
